<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>layui-demo</title>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>


  <!-- cdn -->
  <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
</head>



<body>



  <form class="layui-form"  style="padding: 20px;"> <!-- action="https:www.baidu.com"-->
    <div class="layui-form-item">
      <label class="layui-form-label">输入框</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required"  placeholder="请输入标题" autocomplete="off" class="layui-input"  value="#(data)">
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">密码框</label>
      <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
        value="#(data)"  class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">选择框</label>
      <div class="layui-input-block">
        <select name="city" lay-verify="required">
          <option value="">请选择</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="like[write]" title="写作">
        <input type="checkbox" name="like[read]" title="阅读" checked>
        <input type="checkbox" name="like[dai]" title="发呆">
      </div>
    </div>




    <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">单选框</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">文本域</label>
      <div class="layui-input-block">
        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">

        <select name="city" >
          <option value="">请选择一个城市</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571">杭州</option>
        </select>

      </div>

    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <!-- lay-filter 在layui中作为id -->
        <input class="layui-btn" lay-submit lay-filter="formSubmit" value="立即提交" type="submit">
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>


  <script>
    //Demo
    layui.use(['form', 'element', 'layer'], function () {
      var form = layui.form;
      var element = layui.element;
      var layer = layui.layer;
      var $ = layer.jquery;


      //监听提交
      form.on('submit(formSubmit)', function (data) {
       alert(JSON.stringify(data.field));
        return true;
      });

    });



//layer.alert('见到你真的很高兴', {icon: 6});
  </script>


</body>

</html>


